<template>
	<div class="app-container">
		<div class="filter-container">
			<el-button class="filter-item" type="danger" size="small" @click="onDelete('all')" :disabled="checkedIds.length === 0">删除选中</el-button>
			<el-button class="filter-item" type="primary" size="small" @click="onEdit('add')">添加用户</el-button>
		</div>
		<div class="filter-container">
			<el-input v-model="params.username" placeholder="用户名" class="filter-item search-item" />
			<el-date-picker
				v-model="params.timeRange"
				range-separator="至"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
				class="filter-item search-item date-range-item"
				format="yyyy-MM-dd"
				type="daterange"
				value-format="yyyy-MM-dd"
			/>
			<el-button class="filter-item" type="primary" @click="getList">搜索</el-button>
		</div>

		<el-table ref="table" v-loading="loading" :data="list" border fit row-key="id" style="width: 100%;" @selection-change="onSelectChange">
			<el-table-column align="center" type="selection" width="50"></el-table-column>
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column prop="password" align="center" label="密码" width="200"></el-table-column>
			<el-table-column label="操作" column-key="operation" align="center" class-name="small-padding fixed-width" width="150px">
				<template slot-scope="{ row }">
					<i class="el-icon-edit table-operation" style="color: #2db7f5;" @click="onEdit('edit', row._id)" />
					<i class="el-icon-delete table-operation" style="color: #f50;" @click="onDelete('one', row._id)" />
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :limit.sync="limit" :page.sync="page" :total="Number(total)" @pagination="pagination" />
		<edit ref="edit" :title="operateName" :visible="formVisible" :type="operateType" :formData="formData"  @close="editClose" @success="getList" />
	</div>
</template>

<script>
import Pagination from '@/components/Pagination';
import edit from './edit'

export default {
	components: {
		Pagination,
		edit
	},
	data() {
		return {
			page: 1, // 当前页数
			total: 0, // 总条数
			limit: 10, // 每页显示条数
			loading: false,
			list: [],
			checkedIds: [],
			params: {},
			formVisible: false,
			operateName: '',
			operateType: 'add',
			formData: {}
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		pagination(e) {
			if (e) {
				this.page = e.page;
				this.limit = e.limit;
			}
			this.getList();
		},
		getList() {
			this.loading = true;
			uniCloud
				.callFunction({
					name: 'user',
					data: {
						url: 'getList',
						page: this.page,
						limit: this.limit,
						...this.params
					}
				})
				.then(res => {
					this.loading = false;
					if (res.success) {
						this.total = res.result.total;
						this.list = res.result.data;
					}
				});
		},
		onSelectChange(selection) {
			this.checkedIds = [];
			selection.forEach(item => {
				this.checkedIds.push(item._id);
			});
		},
		// 删除用户
		onDelete(type, id) {
			this.$confirm('此操作将删除选中的用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					uniCloud
						.callFunction({
							name: 'user',
							data: {
								url: 'update',
								id: type === 'one' ? id : this.checkedIds,
								delete_time: new Date().toLocaleString()
							}
						})
						.then(res => {
							this.$message({
								type: 'success',
								message: '删除成功',
								duration: 800,
								offset: 200,
								onClose: () => {
									this.getList();
								}
							});
						});
				})
				.catch(() => {
					// 取消
				});
		},
		onEdit(type, id) {
			this.operateType = type;
			if (type === 'add') {
				this.operateName = '添加用户';
				this.formData = {};
			} else if (type === 'edit') {
				this.operateName = '编辑用户';
				this.$refs.edit.loading = true;
				uniCloud
					.callFunction({
						name: 'user',
						data: {
							url: 'getOne',
							id: id
						}
					})
					.then(res => {
						this.$refs.edit.loading = false;
						this.formData = res.result.data;
					})
			}
			this.formVisible = true;
		},
		editClose() {
			this.formVisible = false;
		}
	}
};
</script>
<style lang="scss" scoped></style>
